<template>
  <div>
    <el-affix>
      <el-row style="height: 10vh">
        <el-col
          :span="4"
          class="border text-center"
          style="background-color: #fab6b6"
        >
          <img src="@/assets/logo.png" style="width: 5rem" />
        </el-col>
        <el-col :span="20">
          <el-menu mode="horizontal" class="h-100 border-0">
            <el-menu-item
              index="1"
              class="ms-auto"
              @click="this.$router.push('/')"
              >回到首页</el-menu-item
            >
            <el-menu-item index="2" @click="logout">退出登录</el-menu-item>
            <el-menu-item @click="this.$router.push('/space/person')"
              ><img src="headUrl" class="border headImg"
            /></el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </el-affix>
    <el-row style="height: 90vh">
      <el-col :span="4" style="background-color: #f89898">
        <el-affix :offset="80">
          <el-menu class="border-0" :router="true">
            <el-menu-item
              index="/space/noteadd"
              style="background-color: #f89898"
            >
              <div class="w-100 text-center">记笔记</div>
            </el-menu-item>
            <el-menu-item
              index="/space/mynote"
              style="background-color: #f89898"
            >
              <div class="w-100 text-center">我的笔记</div>
            </el-menu-item>
            <el-menu-item
              index="/space/person"
              style="background-color: #f89898"
            >
              <div class="w-100 text-center">个人信息</div>
            </el-menu-item>
          </el-menu>
        </el-affix>
      </el-col>
      <el-col :span="20">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import auth from '@/auth/auth.js'
export default {
  name: "SpaceFrame",

  data() {
    return {
      headUrl:null,
    };
  },
  mounted(){
    this.headUrl = auth.getLoginUser().headUrl;
  }
};
</script>

<style scoped>
.headImg {
  width: 3rem;
  border-radius: 50%;
}
.item {
  margin-top: 5px;
  margin-right: 20px;
}
</style>